<template>
    <div class="volume">
        <div class="top">
            <div class="top-left"> 
                <el-progress 
                    :percentage="percent" 
                    :show-text="false"
                ></el-progress>
            </div>
            
            <el-button type="text" v-if="statisticId" @click="upgrade">升级</el-button>
        </div>

        <div class="info">
            <div class="l">
                {{remain}}{{util}}可用，共{{total}}{{util}}
            </div>
        </div>

        <dialog-product v-model="dialogVisible" :projectids="statisticId" @close="close"></dialog-product>
    </div>
</template>

<script>
import dialogProduct from '../../../../user/center/components/dialog-product.vue'
export default {
    components: {
        dialogProduct,
    },
    props: {
        total: {
            type: [Number, String],
            default: 100,
        },
        util: {
            type: String,
            default: 'MB',
        },
        used: {
            type: [Number, String],
            default: 0,
        },
        statisticId: {
            type: String,
            default: '',
        },
        afterBuy: {
            type: [Function, Boolean],
            default: false
        }
    },
    data() {
        return {
            dialogVisible: false,
        }
    },
    computed: {
        remain() {
            var total = Number(this.total),
                used = Number(this.used);

            if (isNaN(total) || isNaN(used)) {
                return '-';
            }

            return (total - used).toFixed(2);
        },
        percent() {
            var total = Number(this.total),
                used = Number(this.used);

            if (isNaN(total) || isNaN(used)) {
                return 0;
            }

            return (used / total) * 100;
        },
    },
    methods: {
        upgrade(){
            this.dialogVisible = true;
        },
        close(){
            !!this.afterBuy && this.afterBuy();
        }
    },
}
</script>

<style lang="scss" scoped>
    .volume{
        padding: 23px 0 17px;
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 7px;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .top-left {
                height: 6px;
                min-width: 200px;
            }

            .el-button {
                padding: 0;
            }
        }

        .info{
            color: #898989;
            margin-top: 10px;
            font-size: 14px;
        }
    }
</style>